import React from "react"
import { View, Text, TouchableOpacity, StyleSheet } from "react-native"
import * as Haptics from "expo-haptics"
import { MotiView, TransitionConfig } from "moti"
import { colors } from "app/theme"
import { MaterialCommunityIcons } from "@expo/vector-icons"

const Transition: TransitionConfig = { type: "timing", duration: 400 }
const fromAnimation = { opacity: 1, scale: 0.9 }

const LabelKeys = {
  Appointments: "calendar",
  Notifications: "bell-badge-outline",
  Access: "lock-open-outline",
}

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={[styles.mainTabContainer]}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key]
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name

        const isFocused = state.index === index

        const onPress = () => {
          const event = navigation.emit({
            type: "tabPress",
            target: route.key,
          })

          if (!isFocused && !event.defaultPrevented) {
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
            navigation.navigate(route.name)
          }
        }

        const onLongPress = () => {
          navigation.emit({
            type: "tabLongPress",
            target: route.key,
          })
        }

        return (
          <TouchableOpacity
            key={index}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={styles.tabStyle}
          >
            <MotiView
              style={styles.moti}
              from={fromAnimation}
              animate={{
                scale: isFocused ? 1 : 0.9,
                backgroundColor: isFocused ? colors.grey : "#FFFFFF",
              }}
              transition={Transition}
            >
              <MaterialCommunityIcons name={LabelKeys[label]} size={28} color={'black'}/>
              <Text style={styles.label}>{label}</Text>
            </MotiView>
          </TouchableOpacity>
        )
      })}
    </View>
  )
}

const styles = StyleSheet.create({
  mainTabContainer: {
    flexDirection: "row",
    backgroundColor: "#FFFFFF",
    alignItems: "center",
    justifyContent: "space-between",
    marginHorizontal: 16,
    borderRadius: 8,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
    position: "absolute",
    bottom: 44,
    paddingVertical: 10,
  },
  tabStyle: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    marginHorizontal: 1,
  },
  moti: {
    alignItems: "center",
    justifyContent: "center",
    width: 88,
    height: 68,
    borderRadius: 10,
  },
  label: {
    color: "#222",
    paddingTop: 5,
    fontSize: 10,
  },
})

export default MyTabBar
